<template>
  <div class="modalupload">
    <!-- 上传图片-对话框 -->
    <el-dialog
      title="合同上传"
      :visible.sync="dialogUpload"
      width="40%">
      <el-form :model="form" ref="form" size="medium">
        <el-form-item label="" prop="imgUrl" style="width: 50%;">
          <img v-if="form.imgUrl" :src="form.imgUrl" class="img">
          <div v-else class="empty"></div>
          <el-upload
            class="btn"
            action=""
            :show-file-list="false"
            accept="image/png,image/jpg"
            v-model="form.imgFile"
            :on-success="handleIdSuccess"
            :before-upload="beforeIdUpload">
            <el-button type="danger">添加图片</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogUpload = false">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'ModalUpload',
    props:{
    },
    data() {
      return {
        dialogUpload: false, //供应商对话框
        form: {
          imgUrl: '',
          imgFile: ''
        }
      }
    },
    created() {
    },
    methods:{
      //打开对话框
      openUp() {
        this.dialogUpload = true;
      },

      // 确认
      ok() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            console.log(this.form);
            this.$emit('imgUp',this.form); //传form中的值到父组件
            this.dialogUpload = false;
            this.$message.success('成功!');
          } else {
            console.log('error submit!!');
            this.$message.error('表单验证失败!');
          }
        });
      },

      //上传身份证照片
      handleIdSuccess(res, file) {
        this.form.imgUrl = URL.createObjectURL(file.raw);
      },
      beforeIdUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isPNG = file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
        } else if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        } else {
          this.form.imgFile = file;
          console.log(this.form.imgFile)
          this.imagePreview(this.form.imgFile);
        }
        // 不使用upload自带的上传方式，而是使用axios，所以阻止upload自带的上传
        return false;
      },
      imagePreview: function(file) {
        var self = this;
        //定义一个文件阅读器
        var reader = new FileReader();
        //文件装载后将其显示在图片预览里
        reader.onload = function(e) {
          //将bade64位图片保存至数组里供上面图片显示
          self.form.imgUrl = e.target.result;
        };
        reader.readAsDataURL(file);
      }

    }
  }
</script>

<style>
  .modalupload .el-dialog .el-dialog__body{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .empty{
    width: 500px;
    height: 400px;
    background-color: #eee;
    margin: 0 auto;
  }
  .img{
    width: 500px;
    height: 400px;
  }
  .btn .el-button{
    width: 500px;
    background: #b5a1e6;
    color: #fff;
    border: 1px solid #fff;
  }
</style>
